<template>
  <div class="wrapper">
    <div class="uc-main clearfix">
      <div class="uc-aside">
        <user-menu></user-menu>
      </div>
      <div class="uc-content">
        <div class="uc-panel">
          <div class="uc-bigtit">商品信息</div>
          <div class="uc-panel-bd">
            <div class="account-info clearfix" >
            <el-form class="col-userinfo"  ref="form" :model="form" label-width="80px">
              <el-form-item  label="商品图片">
                <el-upload
                  class="avatar-uploader col-userinfo"
                  style="margin-left: 0px;"
                  enctype="multipart/form-data"
                  action="/java/api/upload"
                  :headers="myHeaders"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="form.commodityImgurl" :src="form.commodityImgurl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item  label="商品名称">
                <el-input style="width: 320px" class="bd" v-model="form.commodityName"></el-input>
              </el-form-item>
              <el-form-item label="品牌" >
                <el-select v-model="brandId" placeholder="品牌">
                  <el-option v-for="brand in brands" :label="brand.brandName" :value="brand.brandId" :key="brand.brandId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类别" >
                <el-select v-model="categoryId" placeholder="类别">
                  <el-option v-for="category in categorys" :label="category.categoryName" :value="category.categoryId" :key="category.categoryId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品价格">
                <el-input style="width: 320px" class="bd" v-model="form.commodityPrice"></el-input>
              </el-form-item>
              <el-form-item label="商品库存">
                <el-input style="width: 320px" class="bd" v-model="form.commodityNum"></el-input>
              </el-form-item>
              <el-form-item label="商品介绍">
                <el-input type="textarea" style="width: 320px" class="bd" v-model="form.commodityIntroduce"></el-input>
              </el-form-item>
              <el-button style="background: #ff0000; color: #ffffff; width: 320px" class="tj" type="submit" @click="modifyCommodity">确认</el-button>
            </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import UserMenu from './UserMenu'
import http from '../../../base/api/http'
import Util from '../../../common/util'
export default {
  name: 'CommodityDetailsWrapper',
  components: {
    UserMenu
  },
  props: {
    commodityId: String
  },
  data () {
    return {
      form: {
        commodityId: null,
        commodityImgurl: null,
        commodityName: null,
        brandId: null,
        categoryId: null,
        commodityPrice: null,
        commodityNum: null,
        commodityIntroduce: null
      },
      brandId: null,
      categoryId: null,
      brands: [],
      categorys: [],
      formLabelWidth: '120px',
      myHeaders: {
        Authorization: Util.getToken()
      }
    }
  },
  watch: {
    brandId (val, oldVal) {
      this.findCategorys(val)
    }
  },
  methods: {
    modifyCommodity () {
      this.form.brandId = this.brandId
      this.form.categoryId = this.categoryId
      http.requestPost('/java/api/commodity/saveCommodity', this.form).then((res) => {
        if (res.status === 0) {
          alert('修改成功')
        } else {
          alert('修改失败')
        }
      })
    },
    getCommodity (commodityId) {
      http.requestGet('/java/api/commodity/getCommodityDetails', {
        'commodityId': commodityId
      }).then((res) => {
        if (res.status === 0) {
          this.form = res.data
          this.brandId = res.data.brandId
          this.categoryId = res.data.categoryId
        } else {
          alert('获取用户信息失败')
        }
      })
    },
    handleAvatarSuccess (res, file) {
      if (res.status === 0) {
        this.form.commodityImgurl = res.data
      } else {
        alert('上传失败')
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    findBrand () {
      http.requestQuickGet('/java/api/brand/findAll').then((res) => {
        if (res.status === 0) {
          this.brands = res.data
        }
      })
    },
    findCategorys (id) {
      http.requestGet('/java/api/category/findByBrandId', {
        'brandId': id
      }).then((res) => {
        if (res.status === 0) {
          this.categorys = res.data
        }
      })
    }
  },
  mounted () {
    this.findBrand()
    if (this.commodityId) {
      this.getCommodity(this.commodityId)
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>
